<template>
	<view>
		
		<view class="top-bg">
			
			
		</view>
		
		<u-navbar :is-back="true" title="性格测试" back-icon-color="#000" :border-bottom="false" title-color="#fff" :background="{}"></u-navbar>
		
		<view class="question" v-for="(items,indexs) in list" :key="indexs" v-show="indexs == currentIndex">
			<view class="num-title">{{$app.bu0(indexs + 1)}}</view>
			<view class="title">{{items.title}}</view>
			<view class="list u-flex u-flex-wrap">
				<view class="item" v-for="(item,index) in items.options" :key="index" @click="setQA(indexs,index)" :class="{active:items.active == index}">
					<image :src="item.image"></image>
					<view>{{item.sort}}:{{item.optionName}}</view>
				</view>
			</view>
		</view>
		
		<view v-if="list.length" class="btn" @click="nextQa" hover-class="btn-hover">{{currentIndex + 1 == list.length ? '完成' : '下一题'}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				//当前索引
				currentIndex: 0,
			}
		},
		methods: {
			nextQa(){
				if(this.currentIndex + 1 == this.list.length){
					// 答题结束 - 提交答案
					const parseId_1 = this.list.filter(item=> item.options[item.active].parseId == '1')
					const parseId_2 = this.list.filter(item=> item.options[item.active].parseId == '2')
					const parseId_3 = this.list.filter(item=> item.options[item.active].parseId == '3')
					const parseId_4 = this.list.filter(item=> item.options[item.active].parseId == '4')
					const parseIds = [parseId_1.length,parseId_2.length,parseId_3.length,parseId_4.length]
					
					
					// setTimeout(()=>{
					// 	this.currentIndex = 0
					// 	this.list = this.list.map(i=>({...i,active:-1}))
					// },600)
					
					uni.redirectTo({
						url:`/pages/test/result?parseIds=${parseIds.toString()}`
					})
					
					return
				}
				let item = this.list[this.currentIndex]
				if(item.active != -1){
					// 已答题后进如下一题
					this.currentIndex ++
				}else{
					this.$u.toast('请先选择答案')
				}
			},
			setQA(indexs,index){
				let item = this.list[indexs]
				item.active = index
				this.$set(this.list,indexs,item)
			}
		},
		onLoad() {
			this.$u.api.character().then(res=>{
				// 设置每项为 -1
				res.forEach(i=>{i.active = -1})
				this.list = res
			})
		}
	}
</script>

<style lang="scss">
	.top-bg{
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		position: absolute;height: 218rpx;overflow: hidden;width: 100%;
		&::after{content: '';display: block;position: absolute;bottom: -195rpx;left: 50%;transform: translateX(-50%);border: 200rpx solid #fff;width: 2500rpx;height: 2500rpx;border-radius: 50%;}
	}
	.question{
		padding: 0 40rpx;
		.num-title{
			font-size: 70rpx;
			margin-top: 90rpx;
		}
		.title{font-size: 36rpx;font-weight: bold;padding: 40rpx 0;}
		.list{
			align-items: flex-start;
			.item{width: 50%;text-align: center;padding: 20rpx 0;
				image{width: 200rpx;height: 200rpx;border-radius: 50%;border: 4rpx solid transparent;}
				view{font-size: 28rpx;font-weight: bold;color: #111;padding: 20rpx 0;word-break: break-all;text-align: center;}
				&.active{
					image{
						border-color: #00BBAA;
					}
					view{color: #00BBAA;}
				}
			}
		}
	}
	
	
	.btn{
		margin: 80rpx auto 0;
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		
		border-radius: 200rpx;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
	}
	.btn-hover{opacity: .8;}
</style>
